<template>
  <div class="upload-need-container">
    <!-- 页面级加载效果 - 使用自定义loading样式，只覆盖内容区域 -->
    <div class="custom-loading-container" v-if="pageLoading">
      <div class="custom-loading-content">
        <div class="custom-loading-spinner"></div>
        <div class="custom-loading-text">正在加载需求文档...</div>
      </div>
    </div>

    <!-- 上传按钮区域 - 位于页面顶部 -->
    <div class="header-button-container">
      <h2 class="page-title">上传需求文档</h2>
      <el-button type="primary" size="small" @click="handleUpload">上传需求文档</el-button>
    </div>

    <!-- 需求文档表格 - 展示已上传的需求文档信息 -->
    <el-table 
      :data="tableData" 
      style="width: 100%"
      :header-cell-style="{backgroundColor: 'transparent'}"
      :cell-style="{backgroundColor: 'transparent'}"
      ref="dataTable"
      :border="false"
      class="transparent-table"
      fit
    >
      <!-- ID列 -->
      <el-table-column prop="id" label="ID" min-width="8%" align="center" header-align="center"></el-table-column>
      <!-- 项目名称列 -->
      <el-table-column prop="projectName" label="项目名称" min-width="15%" align="center" header-align="center"></el-table-column>
      <!-- 版本号列 -->
      <el-table-column prop="version" label="版本号" min-width="10%" align="center" header-align="center"></el-table-column>
      <!-- 文档名称列 - 点击可查看文档内容 -->
      <el-table-column prop="documentName" label="文档名称" min-width="15%" align="center" header-align="center">
        <template slot-scope="scope">
          <el-tooltip 
            class="item" 
            effect="dark" 
            :content="scope.row.documentName" 
            placement="top-start"
            :enterable="false"
            :show-after="500"
          >
            <el-button 
              type="text" 
              @click="showDocContent(scope.row)" 
              class="document-name-button"
            >{{ scope.row.documentName }}</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- 创建时间列 -->
      <el-table-column prop="createTime" label="创建时间" min-width="15%" align="center" header-align="center"></el-table-column>
      <!-- 更新功能列 - 显示文档内容摘要 -->
      <el-table-column prop="updateFeatures" label="更新功能" min-width="20%" align="center" header-align="center"></el-table-column>
      <!-- 操作列 - 生成功能用例按钮和删除按钮 -->
      <el-table-column label="操作" min-width="25%" align="center" header-align="center">
        <template slot-scope="scope">
          <div class="action-buttons">
            <el-button 
              type="success" 
              size="mini" 
              @click="generateFunctionCase(scope.row)"
              :loading="scope.row.generating"
              :disabled="isAnyGenerating && !scope.row.generating || scope.row.deleting || isAnyDeleting"
              class="function-case-btn"
            >生成功能用例</el-button>
            <el-button 
              type="danger" 
              size="mini" 
              @click="confirmDeleteDocument(scope.row)"
              :disabled="isAnyGenerating || isAnyDeleting || scope.row.deleting"
              :loading="scope.row.deleting"
              class="delete-btn"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
      <!-- 添加空状态插槽 -->
      <template slot="empty">
        <empty-state />
      </template>
    </el-table>

    <!-- 上传需求对话框 - 用于新增需求文档 -->
    <el-dialog
      title="上传需求文档"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="center-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 加载遮罩层 -->
      <div v-if="isSubmitting" class="dialog-loading-mask">
        <div class="dialog-loading-content">
          <img src="../assets/loading.png" class="dialog-loading-icon" alt="loading" />
          <span class="dialog-loading-text">正在上传需求文档...</span>
        </div>
      </div>
      
      <!-- 需求表单 -->
      <el-form :model="form" :rules="rules" ref="uploadForm" label-width="120px">
        <!-- 项目名称输入 -->
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="form.projectName" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <!-- 版本号输入 -->
        <el-form-item label="版本号" prop="version">
          <el-input v-model="form.version" placeholder="请输入版本号"></el-input>
        </el-form-item>
        <!-- 文档名称输入 -->
        <el-form-item label="文档名称" prop="documentName">
          <el-input v-model="form.documentName" placeholder="请输入文档名称"></el-input>
        </el-form-item>
        <!-- 文档上传区域 -->
        <el-form-item label="上传文件">
          <div class="upload-container">
            <el-upload
              class="upload-demo"
              action="#"
              :auto-upload="false"
              :on-change="handleFileChange"
              :show-file-list="false"
              accept=".doc,.docx,.xlsx"
              :before-upload="beforeUpload"
            >
              <div class="file-select-area">
                <el-button type="primary" size="small">选择文件</el-button>
                <template v-if="form.file">
                  <div class="file-item">
                    <el-tooltip :content="form.file.name" placement="top">
                      <span class="uploaded-file-name">{{ form.file.name }}</span>
                    </el-tooltip>
                    <i class="el-icon-close remove-icon" @click="removeFile"></i>
                  </div>
                </template>
              </div>
              <div class="file-format-tip">仅支持上传 .doc、.docx、.xlsx 格式的文件</div>
            </el-upload>
          </div>
        </el-form-item>
        <!-- 更新功能描述输入区域 -->
        <el-form-item label="更新功能">
          <el-input 
            type="textarea" 
            v-model="form.updateFeatures"
            placeholder="请输入更新功能描述"
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false" :disabled="isSubmitting">取消</el-button>
        <el-button type="primary" size="small" @click="submitForm" :disabled="isSubmitting">确定</el-button>
      </span>
    </el-dialog>

    <!-- 文档内容对话框 - 用于查看和编辑文档内容 -->
    <el-dialog
      :title="selectedDoc.documentName || '文档内容'"
      :visible.sync="docContentVisible"
      width="55%"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="center-dialog"
      :before-close="handleDocContentClose"
    >
      <!-- 查看模式 - 点击后切换到编辑模式 -->
      <div class="doc-content" @click="enableEditing" v-if="!isEditing">
        <div class="content-display">{{ selectedDoc.updateFeatures }}</div>
      </div>
      <!-- 编辑模式 - 允许修改文档内容 -->
      <div class="doc-content" v-else>
        <el-input
          type="textarea"
          v-model="selectedDoc.updateFeatures"
          :rows="15"
          resize="none"
          class="content-textarea"
          ref="contentTextarea"
          @input="contentChanged = true"
        ></el-input>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入 chardet 库用于检测文件编码
import chardet from 'chardet';
// 引入 mammoth 库用于解析 Word 文档
import mammoth from 'mammoth';
import EmptyState from './EmptyState.vue'

export default {
  name: 'UploadNeedFile',
  components: {
    EmptyState
  },
  // 组件数据
  data() {
    return {
      pageLoading: true,        // 页面级加载状态
      dialogVisible: false,     // 上传需求对话框可见性
      docContentVisible: false, // 文档内容对话框可见性
      selectedDoc: {},          // 当前选中的文档
      originalContent: '',      // 保存原始文档内容，用于检测是否有修改
      contentChanged: false,    // 标记内容是否被修改
      isEditing: false,         // 文档内容是否处于编辑模式
      isAnyGenerating: false,   // 标记是否有任何行正在生成用例
      isDeleting: false,        // 标记是否正在删除文档
      isAnyDeleting: false,     // 标记是否有任何文档正在删除
      // 表格数据 - 初始为空数组
      tableData: [],
      // 允许的文件类型
      allowedFileTypes: ['.doc', '.docx', '.xlsx'],
      // 表单数据 - 用于创建新需求
      form: {
        projectName: '',         // 项目名称
        version: '',             // 版本号
        updateFeatures: '',      // 更新功能描述
        documentName: '',        // 文档名称
        file: null,               // 上传的文件对象
        fileContent: ''          // 添加字段存储文件内容，但不显示在表单中
      },
      // 表单验证规则
      rules: {
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请输入版本号', trigger: 'blur' }
        ],
        documentName: [
          { required: true, message: '请输入文档名称', trigger: 'blur' }
        ]
      },
      isSubmitting: false, // 添加提交状态标志
    }
  },
  // 生命周期钩子 - 组件挂载后
  mounted() {
    // 初始化表格大小，确保表格正确显示
    this.initTableResize();
    // 添加窗口大小变化监听器
    window.addEventListener('resize', this.handleResize);
    // 获取用户的需求文档列表
    this.getUserDocuments();
  },
  // 生命周期钩子 - 组件销毁前
  beforeDestroy() {
    // 移除窗口大小变化监听器，防止内存泄漏
    window.removeEventListener('resize', this.handleResize);
  },
  // 组件方法
  methods: {
    // 获取用户的需求文档列表
    async getUserDocuments() {
      try {
        this.pageLoading = true; // 显示页面级加载效果
        
        // 从localStorage获取当前用户ID
        const userId = localStorage.getItem('userId');
        if (!userId) {
          this.$message.error('未获取到用户信息，请重新登录');
          this.pageLoading = false;
          return;
        }
        
        // 使用Promise.race实现超时控制
        try {
          // 调用接口获取用户的需求文档，设置较长的超时时间
          const response = await Promise.race([
            this.$axios.get('/api/get_user_requirement_documents/', {
              params: { user_id: userId },
              // 设置超时时间为25秒，略长于预期的20秒响应时间
              timeout: 25000
            }),
            new Promise((_, reject) => 
              setTimeout(() => reject(new Error('请求超时，请稍后再试')), 30000)
            )
          ]);
          
          // 处理响应数据
          if (response.data.code === 200 || response.data.success) {
            // 更新表格数据，将后端返回的数据转换为表格需要的格式
            this.tableData = response.data.data.map(item => ({
              id: item.id,
              projectName: item.project_name,
              version: item.version,
              updateFeatures: item.update_description,
              documentName: item.needfile_name,
              createTime: item.create_time,
              fileContent: item.content,
              generating: false,
              deleting: false
            }));
            
            // 按照ID从小到大排序（升序）
            this.tableData.sort((a, b) => a.id - b.id);
            
            // 如果没有数据，给出提示
            if (this.tableData.length === 0) {
              console.log('当前用户暂无需求文档');
            }
          } else {
            this.$message.error(response.data.message || '获取需求文档列表失败');
          }
        } catch (error) {
          console.error('获取需求文档列表错误:', error);
          
          if (error.message === '请求超时，请稍后再试') {
            this.$message.error('服务器响应时间过长，请稍后再试');
          } else {
            this.$message.error('获取需求文档列表失败: ' + 
              (error.response && error.response.data && error.response.data.message ? 
                error.response.data.message : error.message || '未知错误'));
          }
        }
      } catch (error) {
        console.error('处理需求文档列表出错:', error);
        this.$message.error('获取需求文档列表时发生错误');
      } finally {
        // 保持页面加载效果一段较短的时间后再隐藏，提供更好的用户体验
        setTimeout(() => {
          this.pageLoading = false;
        }, 500);
      }
    },
    // 初始化表格大小
    initTableResize() {
      this.$nextTick(() => {
        if (this.$refs.dataTable) {
          this.$refs.dataTable.doLayout();
        }
      });
    },
    // 处理窗口大小变化
    handleResize() {
      // 重新计算表格布局
      if (this.$refs.dataTable) {
        this.$refs.dataTable.doLayout();
      }
    },
    // 打开上传需求对话框
    handleUpload() {
      this.dialogVisible = true
      // 重置表单
      this.form = {
        projectName: '',
        version: '',
        updateFeatures: '',
        documentName: '',
        file: null,
        fileContent: ''  // 添加字段存储文件内容，但不显示在表单中
      }
    },
    // 读取 Word 文档
    readWordDocument(file) {
      const reader = new FileReader();
      
      reader.onload = (e) => {
        try {
          const arrayBuffer = e.target.result;
          
          // 使用 mammoth.js 从 Word 文档中提取文本
          mammoth.extractRawText({ arrayBuffer })
            .then(result => {
              // 得到纯文本内容，存储但不显示
              this.form.fileContent = result.value;
              // 不再将内容设置到更新功能输入框
              // this.form.updateFeatures = content;
            })
            .catch(error => {
              this.$message.error('解析Word文档失败');
              console.error('Word文档解析错误:', error);
            });
        } catch (error) {
          this.$message.error('读取文件内容失败');
          console.error('文件读取错误:', error);
        }
      };
      
      reader.onerror = () => {
        this.$message.error('读取文件失败');
      };
      
      // 读取文件为 ArrayBuffer
      reader.readAsArrayBuffer(file);
    },
    
    // 读取 Excel 文档 (占位，需要引入适当的Excel解析库实现)
    readExcelDocument(file) {
      // 这里需要引入处理Excel文件的库，例如 SheetJS (xlsx)
      // 目前只是一个占位方法，显示成功信息
      this.$message({
        message: 'Excel文件已上传，但尚未实现解析功能',
        type: 'info'
      });
      
      // 存储文件对象，但不解析内容
      // 注意：实际实现时应该解析Excel内容到fileContent字段
      this.form.fileContent = '未解析的Excel文件内容';
    },
    
    // 处理文件上传变化
    handleFileChange(file) {
      // 检查文件类型是否合法
      const fileName = file.raw.name;
      const fileExtension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
      
      if (!this.allowedFileTypes.includes(fileExtension)) {
        this.$message.error('文件格式不正确，请上传 .doc、.docx 或 .xlsx 格式的文件');
        this.removeFile();
        return;
      }
      
      this.form.file = file.raw;
      // 设置文档名称为上传的文件名
      if (file.raw) {
        this.form.documentName = file.raw.name;

        // 根据文件类型使用不同的处理方法
        const isWordDocument = fileExtension === '.doc' || fileExtension === '.docx';
        const isExcelDocument = fileExtension === '.xlsx';
        
        if (isWordDocument) {
          // 使用 mammoth.js 处理 Word 文档
          this.readWordDocument(file.raw);
        } else if (isExcelDocument) {
          // 使用Excel处理方法
          this.readExcelDocument(file.raw);
        } else {
          // 不应该走到这里，因为前面已经过滤了不合法的文件类型
          this.$message.warning('不支持的文件格式');
          this.removeFile();
        }
      }
    },
    
    // 文件上传前的验证
    beforeUpload(file) {
      // 获取文件扩展名
      const fileName = file.name;
      const fileExtension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
      
      // 检查是否是允许的文件类型
      const isAllowed = this.allowedFileTypes.includes(fileExtension);
      
      if (!isAllowed) {
        this.$message({
          message: '只能上传 .doc、.docx 或 .xlsx 格式的文件!',
          type: 'error'
        });
      }
      
      return isAllowed;
    },
    
    // 提交表单，创建新需求
    submitForm() {
      this.$refs.uploadForm.validate(async (valid) => {
        if (valid) {
          try {
            this.isSubmitting = true; // 开始提交，显示加载状态
            
            // 从localStorage获取当前用户ID
            const userId = localStorage.getItem('userId');
            if (!userId) {
              this.$message.error('未获取到用户信息，请重新登录');
              return;
            }
            
            // 准备提交给后端的数据
            const requestData = {
              user_id: userId,
              project_name: this.form.projectName,
              version: this.form.version,
              update_description: this.form.updateFeatures,
              needfile_name: this.form.documentName || (this.form.file ? this.form.file.name : ''),
              content: this.form.fileContent,
              create_time: new Date().toLocaleString()
            };
            
            // 调用后端接口
            const response = await this.$axios.post('/api/create_requirement_document/', requestData);
            
            // 处理成功响应
            if (response.data.code === 200 || response.data.success) {
              const newRecord = {
                id: this.tableData.length + 1,
                projectName: this.form.projectName,
                version: this.form.version,
                updateFeatures: this.form.updateFeatures,
                fileContent: this.form.fileContent,
                documentName: this.form.documentName || (this.form.file ? this.form.file.name : ''),
                createTime: new Date().toLocaleString(),
                generating: false,
                deleting: false,
                ...(response.data.data && { id: response.data.data.id })
              };
              
              this.tableData.push(newRecord);
              this.$message.success('需求文档上传成功');
              this.dialogVisible = false;
              this.$refs.uploadForm.resetFields();
              this.getUserDocuments();
            } else {
              this.$message.error(response.data.message || '上传文档失败');
            }
          } catch (error) {
            console.error('上传文档请求错误:', error);
            // 修复错误信息拼接
            const errorMessage = error.response && error.response.data && error.response.data.message 
              ? error.response.data.message 
              : error.message || '未知错误';
            this.$message.error('上传文档失败: ' + errorMessage);
          } finally {
            this.isSubmitting = false; // 结束提交，隐藏加载状态
          }
        }
      });
    },
    // 移除已选择的文件
    removeFile() {
      this.form.file = null;
      this.form.documentName = '';
    },
    // 显示文档内容
    showDocContent(row) {
      // 创建一个副本，避免直接修改表格数据
      this.selectedDoc = JSON.parse(JSON.stringify(row));
      
      // 如果存在文件内容，则显示文件内容，否则显示更新功能描述
      if (this.selectedDoc.fileContent) {
        this.selectedDoc.updateFeatures = this.selectedDoc.fileContent;
      }
      
      // 保存原始内容，用于后续比较是否有修改
      this.originalContent = this.selectedDoc.updateFeatures;
      // 重置修改标志
      this.contentChanged = false;
      this.isEditing = false; // 初始为查看模式
      this.docContentVisible = true;
    },
    // 启用编辑模式
    enableEditing() {
      this.isEditing = true;
      // 等待DOM更新后聚焦文本框
      this.$nextTick(() => {
        if (this.$refs.contentTextarea) {
          this.$refs.contentTextarea.focus();
        }
      });
    },
    // 处理文档内容对话框关闭
    handleDocContentClose(done) {
      // 如果处于编辑模式且内容已修改但未保存
      if (this.isEditing && this.contentChanged && 
          this.selectedDoc.updateFeatures !== this.originalContent) {
        this.$confirm('文档内容已修改但未保存，是否放弃修改？', '提示', {
          confirmButtonText: '放弃修改',
          cancelButtonText: '继续编辑',
          type: 'warning'
        }).then(() => {
          // 用户确认放弃修改，关闭对话框
          this.docContentVisible = false;
          this.isEditing = false;
          if (done) done();
        }).catch(() => {
          // 用户取消，继续编辑
          // 不执行任何操作，对话框保持打开状态
        });
      } else {
        // 没有未保存的修改，直接关闭
        this.docContentVisible = false;
        this.isEditing = false;
        if (done) done();
      }
    },
    // 保存文档内容
    saveDocContent() {
      // 查找并更新表格中的对应记录
      const index = this.tableData.findIndex(item => item.id === this.selectedDoc.id);
      if (index !== -1) {
        // 更新文件内容字段而不是更新功能字段
        this.tableData[index].fileContent = this.selectedDoc.updateFeatures;
        this.$message.success('文档内容已保存');
      }
      // 更新原始内容为已保存的内容
      this.originalContent = this.selectedDoc.updateFeatures;
      // 重置修改标志
      this.contentChanged = false;
      // 关闭对话框并重置编辑状态
      this.docContentVisible = false;
      this.isEditing = false;
    },
    // 生成功能用例
    generateFunctionCase(row) {
      // 设置加载状态
      const index = this.tableData.findIndex(item => item.id === row.id);
      if (index !== -1) {
        // 使用Vue.set确保响应式更新
        this.$set(this.tableData[index], 'generating', true);
        // 设置全局生成状态为true，禁用其他按钮
        this.isAnyGenerating = true;
        
        // 模拟API调用生成功能用例
        setTimeout(() => {
          // 模拟生成完成
          this.$set(this.tableData[index], 'generating', false);
          // 恢复全局生成状态
          this.isAnyGenerating = false;
          
          // 显示成功消息
          this.$message({
            message: `已成功为"${row.projectName}"生成功能用例`,
            type: 'success',
            duration: 3000
          });
          
          // 实际项目中，这里应该调用后端API生成功能用例
          // 例如：
          /*
          this.$axios.post('/api/generate-function-case', {
            projectId: row.id,
            documentContent: row.fileContent
          })
          .then(response => {
            this.$set(this.tableData[index], 'generating', false);
            this.isAnyGenerating = false; // 恢复全局生成状态
            this.$message.success('成功生成功能用例');
            // 处理返回的功能用例数据...
          })
          .catch(error => {
            this.$set(this.tableData[index], 'generating', false);
            this.isAnyGenerating = false; // 即使出错也要恢复全局生成状态
            this.$message.error('生成功能用例失败: ' + error.message);
          });
          */
        }, 2000); // 模拟2秒的API调用时间
      }
    },
    // 确认删除文档
    confirmDeleteDocument(row) {
      this.$confirm(`确定要删除"${row.documentName}"文档吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteDocument(row);
      }).catch(() => {
        // 用户取消删除操作
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    
    // 删除文档
    async deleteDocument(row) {
      try {
        // 获取要删除的文档在表格中的索引
        const index = this.tableData.findIndex(item => item.id === row.id);
        if (index === -1) {
          this.$message.error('未找到要删除的文档');
          return;
        }
        
        // 设置删除状态
        this.$set(this.tableData[index], 'deleting', true);
        // 设置全局删除状态
        this.isAnyDeleting = true;
        
        // 从localStorage获取当前用户ID
        const userId = localStorage.getItem('userId');
        if (!userId) {
          this.$message.error('未获取到用户信息，请重新登录');
          this.$set(this.tableData[index], 'deleting', false);
          this.isAnyDeleting = false; // 重置全局删除状态
          return;
        }
        
        // 准备请求参数
        const requestData = {
          id: row.id,
          needfile_name: row.documentName
        };
        
        // 调用删除接口
        const response = await this.$axios.post('/api/delete_requirement_document/', requestData);
        
        // 处理响应
        if (response.data.code === 200 || response.data.success) {
          // 成功删除后从表格中移除该行
          this.tableData.splice(index, 1);
          this.$message.success('需求文档删除成功');
        } else {
          // 服务器返回错误
          this.$message.error(response.data.message || '删除文档失败');
          this.$set(this.tableData[index], 'deleting', false);
        }
        // 删除操作完成后，无论成功或失败，都重置全局删除状态
        this.isAnyDeleting = false;
      } catch (error) {
        console.error('删除文档请求错误:', error);
        
        // 获取错误信息
        const errorMessage = error.response && error.response.data && error.response.data.message 
          ? error.response.data.message 
          : error.message || '未知错误';
        
        this.$message.error('删除文档失败: ' + errorMessage);
        
        // 重置删除状态
        const index = this.tableData.findIndex(item => item.id === row.id);
        if (index !== -1) {
          this.$set(this.tableData[index], 'deleting', false);
        }
        // 重置全局删除状态
        this.isAnyDeleting = false;
      }
    },
  }
}
</script>

<style scoped>
/* 容器样式 */
.upload-need-container {
  position: relative;
  padding: 20px 0;
  min-height: 400px; /* 确保容器有足够高度以显示加载效果 */
}

/* 上传按钮容器样式 */
.header-button-container {
  margin-bottom: 20px;
  padding-right: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 页面标题样式 */
.page-title {
  margin: 0;
  margin-left: 30px;
}

/* 确保按钮文字垂直居中 */
.header-button-container .el-button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 对话框底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 移除表格所有边框和背景色 */
.transparent-table.el-table {
  background-color: transparent !important;
}

.transparent-table.el-table::before,
.transparent-table.el-table::after {
  display: none;
}

.transparent-table.el-table .el-table__header-wrapper,
.transparent-table.el-table .el-table__body-wrapper {
  background-color: transparent !important;
}

.transparent-table.el-table .el-table__header th.el-table__cell {
  background-color: transparent !important;
  border: none !important;
}

.transparent-table.el-table .el-table__body td.el-table__cell {
  background-color: transparent !important;
  border: none !important;
}

.transparent-table.el-table .el-table__body tr:hover > td.el-table__cell {
  background-color: transparent !important;
}

.transparent-table.el-table .el-table__body tr.hover-row > td.el-table__cell {
  background-color: transparent !important;
}

.transparent-table.el-table .el-table__body tr.el-table__row--striped > td.el-table__cell {
  background-color: transparent !important;
}

/* 调整输入框宽度 */
.el-input {
  width: calc(100% - 50px);
}

/* 文本域宽度调整 */
.el-textarea {
  width: calc(100% - 50px);
}

/* 上传区域样式 */
.upload-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(100% - 50px); /* 限制整个上传区域的宽度 */
}

/* 文件选择区域容器 */
.file-select-area {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}

/* 文件项容器 */
.file-item {
  display: flex;
  align-items: center;
  gap: 4px;
  width: calc(100% - 90px); /* 减去选择文件按钮的宽度和间距 */
  overflow: hidden; /* 确保内容不会溢出 */
}

/* 已上传文件名样式 */
.uploaded-file-name {
  color: #606266;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* 上传按钮样式 */
.upload-demo .el-button {
  padding: 8px 16px;
  font-size: 12px;
  height: 32px;
  line-height: 1;
  border-radius: 4px;
  flex-shrink: 0;
  width: 82px; /* 固定选择文件按钮的宽度 */
}

/* 删除文件图标样式 */
.remove-icon {
  color: #909399;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  margin-left: auto; /* 将删除图标推到右侧 */
}

.remove-icon:hover {
  color: #f56c6c;
}

/* 文件格式提示样式 */
.file-format-tip {
  margin-top: 22px; /* 从8px增加到13px */
  color: #E6A23C !important;
  font-size: 12px;
  line-height: 1;
  display: block;
  width: 100%;
  text-align: left;
}

/* 对话框样式 */
.center-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin-top: 0 !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* 使用正确的深度选择器语法 */
:deep(.el-dialog__header) {
  background-color: #ffffff !important;
  padding: 20px !important;
  border-bottom: 1px solid #e4e4e4;
}

:deep(.el-dialog__body) {
  max-height: calc(90vh - 150px);
  overflow-y: auto;
  background-color: #ffffff !important;
  padding: 20px !important;
}

:deep(.el-dialog__footer) {
  background-color: #ffffff !important;
  padding: 20px !important;
  border-top: 1px solid #e4e4e4;
}

/* 移除卡片和对话框的透明背景设置 */
:deep(.el-card),
:deep(.el-dialog) {
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-card__body),
:deep(.el-dialog__body) {
  background-color: #ffffff !important;
  padding: 20px !important;
}

/* 文档内容样式 */
.doc-content {
  height: 435px;
  overflow: hidden;
  padding: 5px 10px;
  background-color: #ffffff !important;
  width: 100%;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
}

/* 内容显示区域样式 */
.content-display {
  height: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
  font-family: inherit;
  line-height: 1.6;
  cursor: text;
  padding: 10px;
  background-color: #ffffff !important;
}

/* 内容文本域容器样式 */
.content-textarea {
  height: 100%;
  width: 100%;
  background-color: #ffffff !important;
}

/* 文本域输入框样式 */
.content-textarea >>> .el-textarea__inner {
  height: 100% !important;
  min-height: 425px !important;
  font-family: inherit;
  line-height: 1.6;
  width: 100%;
  padding: 10px;
  background-color: #ffffff !important;
  border: 1px solid #DCDFE6 !important;
  border-radius: 4px;
}

/* 自定义滚动条样式 */
.content-textarea >>> .el-textarea__inner::-webkit-scrollbar,
.content-display::-webkit-scrollbar {
  width: 8px;
}

.content-textarea >>> .el-textarea__inner::-webkit-scrollbar-track,
.content-display::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.content-textarea >>> .el-textarea__inner::-webkit-scrollbar-thumb,
.content-display::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.content-textarea >>> .el-textarea__inner::-webkit-scrollbar-thumb:hover,
.content-display::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 文档名称按钮样式 */
.document-name-button {
  color: #409EFF;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-align: center;
}

/* 文档名称按钮悬停效果 */
.document-name-button:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 确保tooltip内容可以完整显示 */
:deep(.el-tooltip__popper) {
  max-width: 50%;
  word-break: break-all;
  line-height: 1.4;
}

/* 移除所有卡片和对话框的背景色和边框 */
:deep(.el-card),
:deep(.el-dialog) {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-card__body),
:deep(.el-dialog__body) {
  background-color: transparent !important;
  padding: 0 !important;
}

/* 移除表格的所有边框和背景 */
:deep(.el-table),
:deep(.el-table__inner-wrapper),
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__footer-wrapper) {
  background-color: transparent !important;
  border: none !important;
}

:deep(.el-table::before),
:deep(.el-table::after) {
  display: none !important;
}

:deep(.el-table__cell) {
  background-color: transparent !important;
  border: none !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background-color: transparent !important;
}

:deep(.el-table__body tr.current-row > td.el-table__cell) {
  background-color: transparent !important;
}

/* 自定义页面级加载样式 - 只覆盖表格区域 */
.custom-loading-container {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  border-radius: 4px;
}

.custom-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-30px); /* 稍微向上偏移以获得更好的视觉效果 */
}

.custom-loading-spinner {
  width: 50px;
  height: 50px;
  background: url(../assets/loading.png) no-repeat center center;
  background-size: contain;
  animation: rotate 1.5s linear infinite;
}

.custom-loading-text {
  margin-top: 15px;
  font-size: 16px;
  color: #606266;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 确保表格容器是相对定位，这样加载遮罩可以正确定位 */
.el-table {
  position: relative;
}

/* 移除全局遮罩样式 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 60px !important; /* 与表格区域对齐 */
}

/* 对话框加载遮罩样式 */
.dialog-loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.dialog-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dialog-loading-icon {
  width: 40px;
  height: 40px;
  animation: rotate 1.5s linear infinite;
}

.dialog-loading-text {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 确保对话框有相对定位，这样遮罩可以正确定位 */
.el-dialog {
  position: relative !important;
}

/* 移除原有的按钮loading样式 */
.submit-button,
.button-loading-icon {
  display: none;
}

/* 添加按钮容器样式 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 功能用例按钮与删除按钮样式 */
.function-case-btn,
.delete-btn {
  padding: 6px 12px;
  font-size: 12px;
}
</style>

<!-- 添加全局样式 -->
<style>
/* 自定义加载样式 */
.custom-loading .el-loading-spinner .circular {
  display: none;
}

.custom-loading .el-loading-spinner::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  background: url(../assets/loading.png) no-repeat center center;
  background-size: contain;
  animation: rotate 1.5s linear infinite;
  margin: 0 auto;
}

/* 自定义加载文字样式 */
.custom-loading .el-loading-spinner .el-loading-text {
  color: #000000 !important;
  margin-top: 10px !important;
  font-size: 14px;
  display: block !important;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
